<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/view/jsp/public/include.base.jsp" %>
<html>
<head>
    <title>菜单管理</title>
    <base href="<%=basePath%>">
    <jsp:include page="/WEB-INF/view/jsp/public/include.inc.top.jsp" flush="true"/>
</head>
<body style="min-height:800px;">
<div class="panel">
    <!-- Javascript -->
    <script type="text/javascript">
        init.push(function () {
        });
    </script>
    <!-- / Javascript -->
    <%--<div class="panel-heading">
        <span class="panel-title">jQuery Data Tables</span>
    </div>--%>
    <div class="panel-body">
        <div class="table-primary">
            <table id="tb_menus"></table>
        </div>
    </div>
</div>
<script type="text/javascript">
    init.push(function () {
        // Setup validation
        $("#jq-validation-form-add-menu").validate({
            ignore: '.ignore',
            focusInvalid: false,
            rules: {
                'code': {
                    required: true,
                    remote: {
                        url: '${pageContext.request.contextPath}/sys/menu/validate',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            key: 'menu_code',
                            value: function () {
                                return $('#jq-validation-code').val()
                            }
                        },
                        dataFilter: function (data) {
                            var result = jQuery.parseJSON(data);
                            if (result.code == 200)
                                return result.data;
                            return false;
                        }
                    }
                },
                'sort': {
                    digits: true,
                    range: [1, 99]
                }
            },

            messages: {
                'code': {
                    required: '菜单编码不能为空.',
                    remote: '菜单编码已存在.'
                }, 'sort': {
                    digits: '输入值只能我为整数',
                    range: '输入值必须介于 1 和 99 之间。'
                }
            }
        });


    });
</script>


<!-- Modal -->
<div id="addMenuModal" class="modal fade" role="dialog" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="addMenuModalLabel">新增菜单</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="jq-validation-form-add-menu">
                    <div class="form-group">
                        <label for="jq-validation-code" class="col-sm-3 control-label">菜单编码</label>

                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="jq-validation-code" name="code"
                                   placeholder="Code">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">菜单名称</label>

                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="name" name="name"
                                   placeholder="Name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">描述</label>

                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="description" name="description"
                                   placeholder="Description">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">父菜单</label>

                        <div class="col-sm-9">
                            <select class="form-control" id="select-menu" name="pcode"></select>
                            <%-- <input type="text" id="select-menu" class="form-control">--%>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="sort" class="col-sm-3 control-label">排序号</label>

                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="sort" name="sort"
                                   placeholder="Sort">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">页面链接</label>

                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="pageUrl" name="pageUrl"
                                   placeholder="Page Url">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">菜单图标</label>

                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="icon" name="icon"
                                   placeholder="Icon" onkeyup="showIcon(this)">
                        </div>
                        <div class="col-sm-1 icon-display" style="margin-top:10px;padding-left:5px;"></div>
                    </div>
                </form>
            </div>
            <!-- / .modal-body -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="addMenuSubmit()">保存</button>
            </div>
        </div>
        <!-- / .modal-content -->
    </div>
    <!-- / .modal-dialog -->
</div>
<!-- /.modal -->
<!-- / Modal -->

<script type="text/javascript">
    init.push(function () {
        // Setup validation
        $("#jq-validation-form-edit-menu").validate({
            ignore: '.ignore',
            focusInvalid: false,
            rules: {
                'code': {
                    required: true,
                    remote: {
                        url: '${pageContext.request.contextPath}/sys/menu/validate',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            id: function () {
                                return $.trim($('#edit-id').val());
                            },
                            key: 'menu_code',
                            value: function () {
                                return $('#edit-code').val()
                            }
                        },
                        dataFilter: function (data) {
                            var result = jQuery.parseJSON(data);
                            if (result.code == 200)
                                return result.data;
                            return false;
                        }
                    }
                },
                'sort': {
                    digits: true,
                    range: [1, 99]
                }

            },
            messages: {
                'code': {
                    required: '菜单编码不能为空.',
                    remote: '菜单编码已存在.'
                }, 'sort': {
                    digits: '输入值只能我为整数',
                    range: '输入值必须介于 1 和 99 之间。'
                }
            }
        });
    });
</script>

<!-- Modal -->
<div id="editMenuModal" class="modal fade" role="dialog" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="editMenuModalLabel">编辑菜单</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="jq-validation-form-edit-menu">
                    <div class="form-group">
                        <label for="edit-id" class="col-sm-3 control-label">ID</label>

                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="edit-id" name="id"
                                   placeholder="Id" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="edit-code" class="col-sm-3 control-label">菜单编码</label>

                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="edit-code" name="code"
                                   placeholder="Code">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">菜单名称</label>

                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="edit-name" name="name"
                                   placeholder="Name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">描述</label>

                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="edit-description" name="description"
                                   placeholder="Description">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">父菜单</label>

                        <div class="col-sm-9">
                            <select class="form-control" id="edit-select-menu" name="pcode"></select>
                            <%-- <input type="text" id="select-menu" class="form-control">--%>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="edit-sort" class="col-sm-3 control-label">排序号</label>

                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="edit-sort" name="sort"
                                   placeholder="Sort">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">页面链接</label>

                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="edit-pageUrl" name="pageUrl"
                                   placeholder="Page Url">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">菜单图标</label>

                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="edit-icon" name="icon"
                                   placeholder="Icon" onkeyup="showIcon(this)">
                        </div>
                        <div class="col-sm-1 icon-display" style="margin-top:10px;padding-left:5px;"></div>
                    </div>
                </form>
            </div>
            <!-- / .modal-body -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="editMenuSubmit()">保存</button>
            </div>
        </div>
        <!-- / .modal-content -->
    </div>
    <!-- / .modal-dialog -->
</div>
<!-- /.modal -->
<!-- / Modal -->


</body>
<jsp:include page="/WEB-INF/view/jsp/public/include.inc.bottom.jsp" flush="true"/>
<script type="text/javascript">
    init.push(function () {
        // Javascript code here
        $('#tb_menus').bootstrapTable({
            url: '${pageContext.request.contextPath}/sys/menu/listData.json',
            responseHandler: function (res) {
                return res.data;
            },
            detailView: true,//父子表
            showColumns: true,
            showRefresh: true,
            showToggle: true,
            //showPaginationSwitch:true,
            //striped:true,
            sortable: false,
            height: 600,
            toolbar: '' +
            '<button id="addMenu" onclick="addMenu()" class="btn btn-default" data-toggle="modal" type="button"><i class="glyphicon glyphicon-plus"></i></button>',
            idField: 'id',
            singleSelect: true,
            //clickToSelect: true,
            columns: [{
                field: 'code',
                title: '编码',
                width: 60
            }, {
                field: 'name',
                title: '菜单名称',
                width: 100
            }, {
                field: 'description',
                title: '描述',
                width: 100
            }, {
                field: 'pageUrl',
                title: '页面链接',
                width: 100
            }, {
                field: 'icon',
                title: '图标',
                align: 'center',
                width: 40
            }, {
                field: 'sort',
                title: '排序号',
                align: 'center',
                width: 40
            }, {
                field: 'op',
                title: '操作',
                width: 160,
                formatter: function (value, row, index) {
                    var strHtml = '';
                    strHtml += '<button id="editMenu" onclick="editMenu(' + row.id + ')" class="btn btn-default" style="margin:0 2px;" data-toggle="modal" type="button"><i class="glyphicon glyphicon-pencil"></i></button>';
                    strHtml += '<button id="removeMenu" onclick="removeMenu(' + row.id + ')" class="btn btn-default" style="margin:0 2px;" type="button"><i class="glyphicon glyphicon-minus"></i></button>';
                    strHtml += '<button style="margin:0 2px;" onclick="moveUpOrDown(' + row.id + ',\'up\',\'tb_menus\')" class="btn btn-default"><i class="glyphicon glyphicon-arrow-up"></i></button>';
                    strHtml += '<button style="margin:0 2px;" onclick="moveUpOrDown(' + row.id + ',\'down\',\'tb_menus\')" class="btn btn-default"><i class="glyphicon glyphicon-arrow-down"></i></button>';
                    return strHtml;

                }
            }],
            //注册加载子表的事件。注意下这里的三个参数！
            onExpandRow: function (index, row, $detail) {
                InitSubTable(index, row, $detail);
            }
        });
        var InitSubTable = function (index, row, $detail) {
            var pcode = row.code;
            var table_id = 'row_' + index + '_detailview';
            var cur_table = $detail.html('<table id="' + table_id + '"></table>').find('table');
            $(cur_table).bootstrapTable({
                url: '${pageContext.request.contextPath}/sys/menu/listData.json',
                responseHandler: function (res) {
                    return res.data;
                },
                queryParams: {pcode: pcode},
                //ajaxOptions: { strParentID: parentid },
                idField: 'id',
                singleSelect: true,
                //clickToSelect: true,
                //detailView: true,//父子表
                //uniqueId: "MENU_ID",
                columns: [{
                    field: 'code',
                    title: '编码',
                    width: 60
                }, {
                    field: 'name',
                    title: '菜单名称',
                    width: 100
                }, {
                    field: 'description',
                    title: '描述',
                    width: 100
                }, {
                    field: 'pageUrl',
                    title: '页面链接',
                    width: 100
                }, {
                    field: 'icon',
                    title: '图标',
                    align: 'center',
                    width: 40
                }, {
                    field: 'sort',
                    title: '排序号',
                    align: 'center',
                    width: 40
                }, {
                    field: 'op',
                    title: '操作',
                    width: 160,
                    formatter: function (value, row, index) {
                        var strHtml = '';
                        strHtml += '<button id="editMenu" onclick="editMenu(' + row.id + ')" class="btn btn-default" style="margin:0 2px;" data-toggle="modal" type="button"><i class="glyphicon glyphicon-pencil"></i></button>';
                        strHtml += '<button id="removeMenu" onclick="removeMenu(' + row.id + ')" class="btn btn-default" style="margin:0 2px;" type="button"><i class="glyphicon glyphicon-minus"></i></button>';
                        strHtml += '<button style="margin:0 2px;" onclick="moveUpOrDown(' + row.id + ',\'up\',\'' + table_id + '\')" class="btn btn-default"><i class="glyphicon glyphicon-arrow-up"></i></button>';
                        strHtml += '<button style="margin:0 2px;" onclick="moveUpOrDown(' + row.id + ',\'down\',\'' + table_id + '\')" class="btn btn-default"><i class="glyphicon glyphicon-arrow-down"></i></button>';
                        return strHtml
                    }
                }],
                //无线循环取子表，直到子表里面没有记录
                onExpandRow: function (index, row, $Subdetail) {
                    InitSubTable(index, row, $Subdetail);
                }
            });
        };
    });
    window.PixelAdmin.start(init);

    var addMenu = function () {
        $("#jq-validation-form-add-menu")[0].reset();
        $("#jq-validation-form-add-menu").validate().resetForm();
        $.ajax({
            type: 'GET',
            url: '${pageContext.request.contextPath}/sys/menu/root.json',
            success: function (data) {
                if (data.code == 200) {
                    $("#select-menu").empty();
                    $("#select-menu").append('<option value=""></option>');
                    $.each(data.data, function (index, item) {
                        $("#select-menu").append('<option value="' + item.code + '">' + item.name + '</option>');
                    });
                    $("#select-menu").select2({
                        placeholder: "",
                        allowClear: true,
                        minimumResultsForSearch: Infinity
                    });
                }
            },
            error: function () {
            }
        });
        $('#addMenuModal').modal('show');
    };

    var addMenuSubmit = function () {
        if ($("#jq-validation-form-add-menu").valid()) {
            $.ajax({
                type: 'POST',
                url: '${pageContext.request.contextPath}/sys/menu/create',
                data: $('#jq-validation-form-add-menu').serialize(),
                success: function (data) {
                    if (data.code == 200) {
                        bootbox.alert({
                            title: '<span style="font-size: 14px;"><B>提示</B></span>',
                            message: "<div style='text-align: left;'><span style='font-size: 14px;'>操作成功</span></div>",
                            callback: function () {
                                $('#addMenuModal').modal('hide');
                                $('#tb_menus').bootstrapTable('refresh');
                            },
                            className: "bootbox-sm"
                        });
                    }
                },
                error: function () {
                }
            });
        }

    };

    var editMenu = function (id) {
        var menuData = findMenu(id);
        if (null != menuData) {
            $.ajax({
                type: 'GET',
                async: false,
                url: '${pageContext.request.contextPath}/sys/menu/root.json',
                success: function (data) {
                    if (data.code == 200) {
                        $("#edit-select-menu").empty();
                        $("#edit-select-menu").append('<option value=""></option>');
                        $.each(data.data, function (index, item) {
                            $("#edit-select-menu").append('<option value="' + item.code + '">' + item.name + '</option>');
                        });
                        $("#edit-select-menu").select2({
                            placeholder: "",
                            allowClear: true,
                            minimumResultsForSearch: Infinity
                        });
                        console.log("pcode:", menuData.pcode);
                        $("#edit-select-menu").val(menuData.pcode).trigger("change");
                    }
                },
                error: function () {
                }
            });
            $('#edit-id').val(menuData.id);
            $('#edit-code').val(menuData.code);
            $('#edit-name').val(menuData.name);
            $('#edit-description').val(menuData.description);
            $('#edit-pageUrl').val(menuData.pageUrl);
            $('#edit-icon').val(menuData.icon);
            $('#edit-sort').val(menuData.sort);
            $('#jq-validation-form-edit-menu .icon-display').html('');
            $('#jq-validation-form-edit-menu .icon-display').html(menuData.icon);
            $('#editMenuModal').modal('show');
        }
    };

    var findMenu = function (id) {
        var result = null;
        $.ajax({
            type: 'GET',
            async: false,
            url: '${pageContext.request.contextPath}/sys/menu/' + id + '.json',
            success: function (data) {
                if (data.code == 200) {
                    result = data.data;
                }
            },
            error: function () {

            }
        });
        return result;
    };

    var editMenuSubmit = function () {
        if ($("#jq-validation-form-edit-menu").valid()) {
            $.ajax({
                type: 'PUT',
                url: '${pageContext.request.contextPath}/sys/menu/' + $('#edit-id').val(),
                data: $('#jq-validation-form-edit-menu').serialize(),
                success: function (data) {
                    if (data.code == 200) {
                        bootbox.alert({
                            title: '<span style="font-size: 14px;"><B>提示</B></span>',
                            message: "<div style='text-align: left;'><span style='font-size: 14px;'>操作成功</span></div>",
                            callback: function () {
                                $('#editMenuModal').modal('hide');
                                $('#tb_menus').bootstrapTable('refresh');
                            },
                            className: "bootbox-sm"
                        });
                    }
                },
                error: function () {
                }
            });
        }

    };

    var removeMenu = function (id) {
        bootbox.confirm({
            title: '<span style="font-size: 14px;"><B>提示</B></span>',
            message: "<div style='text-align: left;'><span style='font-size: 14px;'>确认要删除吗?</span></div>",
            callback: function (result) {
                if (result) {
                    $.ajax({
                        type: 'DELETE',
                        url: '${pageContext.request.contextPath}/sys/menu/' + id,
                        success: function (data) {
                            if (data.code == 200) {
                                bootbox.alert({
                                    title: '<span style="font-size: 14px;"><B>提示</B></span>',
                                    message: "<div style='text-align: left;'><span style='font-size: 14px;'>操作成功</span></div>",
                                    callback: function () {
                                        $('#tb_menus').bootstrapTable('refresh');
                                    },
                                    className: "bootbox-sm"
                                });
                            }
                        },
                        error: function () {
                        }
                    });

                }
            },
            buttons: {
                confirm: {label: '确定'},
                cancel: {label: '取消'}
            },
            className: "bootbox-sm"

        });
    };

    var showIcon = function (obj) {
        var _div = $(obj).parent().parent().find(".icon-display");
        if (null != _div && undefined != _div) {
            $(_div).html($(obj).val());
        }
    };

    var moveUpOrDown = function (id, type, table) {
        $.ajax({
            url: '${pageContext.request.contextPath}/sys/menu/' + id + '/sort',
            type: 'PUT',
            data: {type: type},
            success: function (data) {
                if (data.code == 200) {
                    $('#' + table).bootstrapTable('refresh');
                }
            }, error: function () {
            }
        });
    };
</script>
</html>
